{extend name="public/base"}

{block name="css"}
<link href="/static/plugins/jquery-treetable/css/jquery.treetable.css" rel="stylesheet">
<link href="/static/plugins/jquery-treetable/css/jquery.treetable.theme.default.css" rel="stylesheet">
{/block}


{block name="content"}
<div class="container-fluid">

    <div class="row">
        <div class="col-12">
            <div class="card-box">
                <div class="search-box">
                    <div class="col-sm-2"> 
                        <a href="#add-edit-modal" class="btn btn-custom waves-effect waves-light btn-md" data-animation="fadein" data-plugin="custommodal"
                                       data-overlaySpeed="200" data-overlayColor="#36404a" id="add-btn">+ 添加</a>
                    </div>
                </div>
                <div class="table-rep-plugin">
                    <div class="table-responsive" data-pattern="priority-columns">
                        <table id="tech-companies-1" class="table table-striped tree-table">
                            <thead>
                            <tr>
                                <th>菜单</th>
                                <th data-priority="1">权限标识</th>
                                <th data-priority="1">排序</th>
                                <th data-priority="3">状态</th>
                                <th data-priority="3">创建时间</th>
                                <th data-priority="6">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                                {foreach $list as $item}
                                    <tr data-tt-id="{$item.id}" data-tt-parent-id="{$item.parent_id}">
                                        <td>{$item.menu_name}</td>
                                        <td>{$item.perms}</td>
                                        <td>{$item.sort}</td>
                                        <td><span class="{$item.status==1 ? 'status-on' : 'status-off'}">{$item.statusName}</span></td>
                                        <td>{$item.create_time}</td>
                                        <td class="actions">
                                            <a href="#add-edit-modal" class="on-default edit-row edit-btn" data-animation="fadein" data-plugin="custommodal"
                                            data-overlaySpeed="200" data-overlayColor="#36404a" data-url="{:url('SysMenu/info',['id'=>$item.id])}">编辑</a>
                                            <a href="javacript:;" class="on-default remove-row delete-btn" data-url="{:url('SysMenu/delete',['ids'=>$item.id])}">删除</a>
                                        </td>
                                    </tr>
                                {/foreach}
                            </tbody>
                        </table>
                        
                    </div>

                </div>

            </div>
        </div>
    </div>
    <!-- end row -->

    <!-- Modal -->
    <div id="add-edit-modal" class="modal-demo">
        <button type="button" class="close" onclick="Custombox.close();">
            <span>&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="custom-modal-title"></h4>
        <div class="custom-modal-text">
            <form class="add-edit-form" method="post">
                <div class="form-group">
                    <label for="menuName">菜单名称<span class="text-danger">*</span></label>
                    <input type="text" name="menu_name" parsley-trigger="change" required
                           placeholder="请输入菜单名称" class="form-control" id="menuName">
                </div>
                <div class="form-group">
                    <div class="select-box">
                        <label for="parentId">上级菜单<span class="text-danger">*</span></label>
                        <input type="hidden" name="parent_id" value="0">
                        <div class="select-div form-control"><span data-name="parent_menu_name">顶级菜单</span><i class="fa fa-angle-down"></i></div>
                        <table class="tree-table2 tree-table-checkbox select-table">
                            <tbody class="select-option">
                                {foreach $list as $item}
                                    <tr data-tt-id="{$item.id}" data-tt-parent-id="{$item.parent_id}">
                                        <td>
                                            <label data-option="{$item.id}">{$item.menu_name}</label>
                                        </td>
                                    </tr>
                                {/foreach}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="form-group">
                    <label for="menuType">菜单类型<span class="text-danger">*</span></label>
                    <select class="form-control" name="menu_type" id="menuType">
                        {foreach $menuTypeList as $item}
                        <option value="{$item.code}">{$item.desc}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="form-group">
                    <label for="perms">权限标识</label>
                    <input type="text" name="perms" parsley-trigger="change"
                           placeholder="例如:SysUser/index" class="form-control" id="perms">
                </div>
                <div class="form-group">
                    <label for="icon">菜单图标</label>
                    <div class="input-group">
                        <input type="text" name="icon" parsley-trigger="change"
                           placeholder="" class="form-control" id="icon">
                        <span class="input-group-addon"><a href="https://fontawesome.com.cn/v4/icons" target="_blank" title="查找图标" style="color:#313a46"><i class="fa fa-search"></i></a></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="sort">排序</label>
                    <input type="text" name="sort" parsley-trigger="change"
                           placeholder="0" class="form-control" id="sort">
                </div>
                <div class="form-group">
                    <label for="status">状态</label>
                    <select class="form-control" name="status">
                        {foreach $statusList as $status}
                        <option value="{$status.code}">{$status.desc}</option>
                        {/foreach}
                    </select>
                </div>

                <div class="form-group text-center m-b-0">
                    <input type="hidden" name="id" >
                    <button class="btn btn-custom waves-effect waves-light" type="submit">确定</button>
                </div>

            </form>
        </div>
    </div>

</div> <!-- container -->
{/block}

{block name="script"}
<script src="/static/plugins/jquery-treetable/jquery.treetable.js"></script>
<script>
    const addEditConfig = {
        'addUrl': "{:url('SysMenu/add')}",
        'editUrl': "{:url('SysMenu/edit')}"
    }
    const addData = {
        menu_type: 2,
        status: 1,
        parent_id: 0,
        parent_menu_name: "顶级菜单"
    }

    $("#menuType").change(function() {
        const val = $(this).val();
        if (val == 1) {
            $('#perms,#frameUrl').closest(".form-group").hide();
            $('#icon').closest(".form-group").show();
        }
        if (val == 2) {
            $('#perms,#frameUrl,#icon').closest(".form-group").show();
        }
        if (val == 3) {
            $('#frameUrl,#icon').closest(".form-group").hide();
            $('#perms').closest(".form-group").show();
        }
    })

    $(".tree-table").treetable({
        expandable: true,
        initialState: "collapsed"
    });

    $(".tree-table2").treetable({
        expandable: true,
        initialState: "collapsed"
    });
</script>
{/block}

